<template>
  <div class="content">
    <transition
      enter-active-class="animate__animated animate__fadeInDown"
      leave-active-class="animate__animated animate__fadeOutUp"
      appear
    >
      <div
        v-if="true"
        class="top_group"
      >
        <img
          class="top_bg_img"
          src="@/assets/icon/top_bg.png"
          alt=""
        >
        <div class="page_weather">
          <img
            :src="weatherIcon == 1 ? require('@/assets/icon/duoyun.png') :
              weatherIcon == 2 ? require('@/assets/icon/yu.png') :
              weatherIcon == 3 ? require('@/assets/icon/xue.png') :
              weatherIcon == 4 ? require('@/assets/icon/yin.png') : require('@/assets/icon/qing.png')"
            alt=""
          >

          {{ weather }} {{ celsius }}
        </div>


        <div class="page_name_group">
          <div class="page_name">
            中煤建设集团第三工程处
          </div>
          <div class="page_name_yy">
            中煤建设集团第三工程处
          </div>
        </div>
        <div class="page_time">
          {{ currentDate }}
        </div>
      </div>
    </transition>
    <div class="center_content">
      <transition
        enter-active-class="animate__animated animate__fadeInLeft"
        leave-active-class="animate__animated animate__fadeOutLeft"
        appear
      >
        <left_page v-if="true" />
      </transition>

      <transition
        enter-active-class="animate__animated animate__fadeInRight"
        leave-active-class="animate__animated animate__fadeOutRight"
        appear
      >
        <right_page v-if="true" />
      </transition>
    </div>
    <transition
      enter-active-class="animate__animated animate__fadeInUp"
      leave-active-class="animate__animated animate__fadeOutDown"
      appear
    >
      <bottom_page v-if="true" />
    </transition>
  </div>
</template>

<script>
import left_page from './center/left.vue'
import right_page from './center/right.vue'
import bottom_page from './bottom/bottom.vue'
import 'animate.css'
export default {
  components: {
    left_page,
    right_page,
    bottom_page
  },
  data() {
    return {
      currentDate: '',
      weather: '',
      celsius: '',
      weatherIcon: 0,
      intervalId: null,
    };
  },
  mounted() {
    this.getCurrentDate();
    this.getWeather();
    this.intervalId = setInterval(() => {
      this.getCurrentDate();
      this.getWeather();
    }, 60 * 60 * 1000);

  },
  beforeDestroy() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
      this.intervalId = null;
    }
  },
  methods: {
    getCurrentDate() {
      localStorage.clear();
      sessionStorage.clear();
      const date = new Date();
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const weekDay = weekDays[date.getDay()];
      this.currentDate = `${year}年${month}月${day}日 ${weekDay}`; 
    },
    getWeather() {
      const apiKey = 'c0fe4bbdcd4b4a3bbbe21bba6deeaa95';
      this.$axios({
        method: 'get',
        url: 'https://devapi.qweather.com/v7/weather/now?location=101080711',
        headers: {
          'X-QW-Api-Key': apiKey
        }
      }).then(resp => {
        if (resp.code == 200) {
          this.weather = resp.now.text;
          this.celsius = resp.now.temp + '°C';
          console.log('触发定时器更新天气概况......', this.celsius);

          const iconRanges = [
            { min: 101, max: 104, icon: 1 },
            { min: 300, max: 399, icon: 2 },
            { min: 400, max: 499, icon: 3 },
            { min: 500, max: 515, icon: 4 }
          ];

          const icon = +resp.now.icon;
          this.weatherIcon = 0;
          for (const range of iconRanges) {
            if (icon >= range.min && icon <= range.max) {
              this.weatherIcon = range.icon;
              break;
            }
          }
        }
      })
    }
  },
};
</script>

<style scoped lang="scss">
@font-face {
  font-family: 'Alibaba';
  src: url('../assets/font/Alibaba-PuHuiTi-Bold_0.ttf');
  font-weight: normal;
  font-style: normal;
}

.animate__animated {
  --animate-duration: 2s;
  --animate-delay: 1s;
}


.content {
  width: 100%;
  // height: 100vh;
  background-color: rgba(0, 34, 96, 1);

  .top_group {
    width: 100%;
    position: relative;

    .top_bg_img {
      width: 100%;
    }

    .page_weather {
      position: absolute;
      width: 20%;
      top: 35%;
      left: 2.5%;
      font-size: 2rem;
      font-weight: bold;
      color: transparent;
      background-image: linear-gradient(180deg, rgba(247, 252, 255, 1) 0%, rgba(27, 241, 245, 1) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      img {
        width: 8%;
        margin-right: 0.8rem;
      }
    }

    .page_name_group {
      position: absolute;
      width: 50%;
      top: 10px;
      left: 25%;

      .page_name,
      .page_name_yy {
        width: 100%;
        position: absolute;
        top: .2rem;
        font-size: 4.2rem;
        font-weight: 900;
        text-align: center;
        font-family: Alibaba;
        letter-spacing: 0px;
      }

      .page_name {
        color: transparent;
        background-image: linear-gradient(180deg, rgba(247, 252, 255, 1) 0%, rgba(27, 241, 245, 1) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        z-index: 3;
      }

      .page_name_yy {
        text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5) !important;
        z-index: 1;
      }
    }

    .page_time {
      position: absolute;
      width: 20%;
      top: 35%;
      right: 2.5%;
      font-size: 2rem;
      font-weight: bold;
      text-align: right;
      color: transparent;
      background-image: linear-gradient(180deg, rgba(247, 252, 255, 1) 0%, rgba(27, 241, 245, 1) 100%);
      -webkit-background-clip: text;
      background-clip: text;
    }

  }

  .center_content {
    width: 100%;
    padding: 1% 1% 0.5% 1%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }


}


@media (max-width: 480px) and (max-height: 360px) {
  .page_name_group {
    top: 5px !important;
  }

  .page_name,
  .page_name_yy {
    font-size: 1.88rem !important;
    top: 0 !important;
  }

  .page_time {
    font-size: .8rem !important;
  }

  .page_weather {
    font-size: .8rem !important;

    img {
      margin-right: 0.5rem !important;
    }
  }

}


@media (max-width: 420px) {
  .page_name_group {
    top: 3px !important;
  }

  .page_name,
  .page_name_yy {
    font-size: 1.61rem !important;
    top: 0 !important;
  }

}
</style>